<template>
    <div class="chart-wrap">
        <div class="top">
            <div class="title">数据类型统计</div>
        </div>
        <div id="data-type-chart"></div>
    </div>
</template>

<script>
import { queryTypeNumber } from 'S/downloadNum';
import { resizeListener } from 'U/echartResize';
export default {
    name: 'dataTypeChart',
    data() {
        return {
            dataAxis: [],
            data: [],
            valueTime: '',
        };
    },
    methods: {
        async initData() {
            this.dataAxis = [];
            this.data = [];
            let params = {};
            if (this.valueTime) {
                params = {
                    startTime: this.valueTime[0],
                    emdTime: this.valueTime[1],
                };
            }
            let res = await queryTypeNumber(params);
            if (res.status === 200) {
                this.dataAxis = res.data.map(item => item.product_type);
                this.data = res.data.map(item => item.count);
                this.initCharts();
            }
        },
        initCharts() {
            this.chart = this.$echarts.init(document.getElementById('data-type-chart'));
            this.chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    formatter: function(params) {
                        return '类型：' + params[0].name + '<br/>数量：' + params[0].value;
                    },
                },
                xAxis: {
                    data: this.dataAxis,
                    axisLabel: { interval: 0 },
                    axisTick: {
                        show: true,
                    },
                },
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        barCategoryGap: '50%',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: '#FE8D1B',
                                label: {
                                    show: true,
                                    position: 'top',
                                },
                            },
                        },
                        data: this.data,
                    },
                ],
            });
            resizeListener(this.myChart);
        },
    },
    mounted() {
        this.initData();
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
    },
};
</script>

<style lang="scss" scope>
#data-type-chart {
    width: 500px;
    height: 380px;
    margin-left: 30px;
}
</style>
